:root {
  --font-color: #111111;
  --border-color: #4449a1;
  --lighter-color: #ffffff;
  --main-color: #f6f8fb;
  --active-color: #6d9be0;
  --stripe-color: #fafafa;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
}

//白主题
[dark-theme='true'] {
  --font-color: #f5f5f5;
  --border-color: #f5f5f5;
  --lighter-color: #272d31;
  --main-color: #262a31;
  --active-color: #4449a1;
  --stripe-color: #2d3542;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
}

// [dark-theme='true'] {
//   --font-color: #f5f5f5;
//   --border-color: #f5f5f5;
//   --lighter-color: #272d31;
//   --main-color: #262a31;
//   --active-color: #4449a1;
// }


@import './table.scss';

// $fontAndBorder: #f5f5f5;
// $asideColor: #272d31;
// $asideAcitveColor: #4449a1;
// $mainColor: #262a31;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  background-color: var(--lighter-color);
  transition: background 0.3s ease;
  font-size: 14px;
}

//el-card样式--------------------------
.el-card {
  background-color: var(--main-color) !important;
  border: none !important;
  border-radius: 8px !important;
  // box-shadow: 0 0 8px 8px rgba($color: #000000, $alpha: 0.1) !important;
}

//el-message样式------------------------
// .el-message--success {
//   background-color: var(--success-color) !important;
// }

//el-pagination样式------------------------
.el-pagination {
  margin: 16px 0 8px 0;
  float: right;
}

.el-pager li,
.btn-prev,
.btn-next {
  color: var(--font-color) !important;
  background-color: var(--main-color) !important;
  border: 1px solid var(--border-color) !important;
}

.el-pager li.is-active {
  background-color: var(--active-color) !important;
  border: 1px solid var(--active-color) !important;
}

.el-pagination__total,
.el-pagination__jump {
  color: var(--font-color) !important;
}

.el-select-dropdown__list {
  box-shadow: 0 0 0 0;
  background-color: var(--main-color) !important;
}

.el-select-dropdown__item {
  color: var(--font-color) !important;
}

.el-select-dropdown__item.hover {
  background-color: var(--active-color) !important;
}

//el-input样式------------------------
.el-input__wrapper {
  // width: 215px;
  background-color: var(--main-color) !important;
  transition: background 0.3s ease !important;
  // box-shadow: 0 0 0 0 !important;
}

.el-form-item__label,
.el-input__inner {
  color: var(--font-color) !important;
  transition: color 0.5s ease;
}

//disable属性的遮罩文字颜色
.is-disabled .el-input__inner {
  -webkit-text-fill-color: var(--font-color) !important;
}

//el-button样式--------------------------
.el-button {
  min-width: 60px;
  margin-left: 12px !important;
}




//el-tag样式--------------------------
.el-tag {
  // border-radius: 4px;
  min-width: 40px;
}

//el-dialog样式--------------------------
//element-plus中dialog样式修改需要手动添加一个class来修改。并且不能在scope中写样式。
.dialog,
.drawer,
.el-message-box {
  //必须加important
  // border: 1px solid var(--border-color);
  border-radius: 16px !important;
  background-color: var(--main-color) !important;
}

.el-dialog__title {
  font-weight: bold;
}

.el-drawer__header {
  margin-bottom: 0 !important;
}

.dialog .el-dialog__title,
.dialog .el-dialog__body,
.el-message-box__title,
.el-message-box__content {
  color: var(--font-color) !important;
}

//el-popove样式--------------------------
//element-plus中el-popover样式修改需要手动添加一个popper-class来修改。并且不能在scope中写样式。
.el-popover.popper {
  padding: 0 !important;
  border: 1px solid var(--border-color);
  background-color: var(--lighter-color) !important;
  border-radius: 16px !important;
  // overflow: auto;
}

//修改el-popover小三角
.el-popper__arrow::before {
  background: var(--lighter-color) !important;
}


//进度条样式--------------------------
::-webkit-scrollbar-track-piece {
  border-radius: 0;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #ccd0d9;
  transition: all 0.3s ease;
  border-radius: 6px;
  outline-offset: -2px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #909399;
  transition: all 0.3s ease;
  cursor: pointer;
}


//跟随系统颜色样式(手动切换二选一)--------------------------
// @media (prefers-color-scheme: light) {
//   :root {
//     --font-color: #111111;
//     --lighter-color: #ffffff;
//     --main-color: #fafafa;
//     --active-color: #98c0fc;
//   }
// }

// @media (prefers-color-scheme: dark) {
//   :root {
//     --font-color: #f5f5f5;
//     --lighter-color: #c4c4c4;
//     --main-color: #242424;
//     --active-color: #44a182;
//   }
// }